<template>
  <div>
    <!-- <img ref="loginImg" src="@/assets/login_bg.png" width="100" height="100" /> -->
    <canvas ref="myCanvas" width="300" height="300"></canvas>
    <div>
      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
    </div>
    <div ref="main" style="width:500px;height:300px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

console.log(ClassicEditor)

export default {
  name: "shouyeRecomend",
  components: {

  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: '<p>Hello editor.</p>',
      editorConfig: {
          // The configuration of the editor.
          height: 1300,
          simpleUpload: {
          uploadUrl: 'http://example.com',
            headers: {}
          }
      }
    };
  },
  methods: {
    drawEchart(){
      var myChart = echarts.init(this.$refs.main);
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [10, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      });
    }
  },
  created() {
    
  },
  mounted() {
    this.drawEchart()
    ///获取画布的dom对象
    var c = this.$refs.myCanvas;
    ///获取画布
    var ctx = c.getContext("2d");
    ///获取图片对象
    //let img = this.$refs.loginImg
    let img = new Image()
    img.onload = function() {
      ctx.drawImage(img,0,0,300,300);
      ///开始绘制路径
      ctx.beginPath();
      ///把路径移动到画布中的指定点
      ctx.moveTo(10,10);
      ///添加一个新点
      ctx.lineTo(150,10);
      ctx.lineTo(150,150);
      ctx.lineTo(10,150);
      ///关闭路径
      ctx.closePath();
      ctx.strokeStyle = "#0000ff";
      ///线条宽度
      ctx.lineWidth = 1;
      ///绘制已定义的路径
      //ctx.stroke();
      ///填充颜色
      ctx.fillStyle = "#ff0000";
      ///填充路径
      ctx.fill();
      ctx.fillStyle = "rgba(0,0,0,0.9)";
      ///绘制矩形
      ctx.fillRect(20,20,150,100);
      ///开始绘制圆
      ctx.beginPath();
      ///创建圆形路径
      ctx.arc(100,75,50,0,2 * Math.PI);
      ctx.strokeStyle = "#fff";
      ctx.stroke();
      ctx.fillStyle = "#fff";
      ctx.fill();
    }
    //img.src = require('@/assets/login_bg.png')
    img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fnote%2Fl%2Fpublic%2Fp82460877.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653451169&t=fc84cc53914443a02b73b5896628eb6c'
  }
};
</script>

<style scoped>

</style>
